<style lang="less">
.commodity-marquee {
    position: relative;
    overflow: hidden;
    .ivu-carousel {
        position: static;
    }
    .ivu-carousel-list {
        overflow: visible;
    }
    .ivu-carousel-arrow.right {
        right: 0;
    }
    .ivu-carousel-arrow.left {
        left: 0;
    }
}
</style>


<template>
<div class="commodity-marquee">
    <Carousel v-model="value" dots="none" :style="{width:isPhone?'33.3%':'16.7%'}" @on-change="handleChange">
        <CarouselItem v-for="(item, i) in items" :key="i" pd1>
            <div style="position:relative;padding-bottom: 100%;overflow:hidden;" bd-gray4>
                <router-link class="index-scale" :to="{name:'commodity-detail', params:{id:item.id}}">
                    <background-image class="index-scale-icon easyshow" :value=item.picture style="position:absolute;top:0;bottom:0;left:0;right:0;">
                        <div class="easyshow-content" core full white style="background-color:rgba(0, 150, 255, .5);cursor:pointer;">
                            <div long>
                                <p ellipsis pdx3>{{item.name}}</p>
                                <p pdy2 linkable-white>[详情]</p>
                            </div>
                        </div>
                    </background-image>
                </router-link>
            </div>
        </CarouselItem>
    </Carousel>
</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import BackgroundImage from '@common/components/background-image';

@Component({
    components: {
        BackgroundImage
    }
})
export default class CommodityMarquee extends AbpBase{
    @Prop() items:any;
    value:Number = 0;
    handleChange(oldValue, value) {
        if(oldValue == 0 && value != 1) {
            this.value = 0;
        }else if(oldValue == this.items.length - 1 && value == 0) {
            this.value = this.items.length - 1;
        }
        //console.log(oldValue, value, this.value)
    }
}
</script>

<style>

</style>
